<template>
  <el-card class="bigCard">
    <div class="nav-top">
      <el-button v-if="checkPerm('addClient')" type="primary" size="small" @click="addCustomer">添加客户</el-button>
      <el-form :inline="true" class="demo-form-inline" :model="form">
        <el-form-item>
          <!-- v-model: 双向绑定的是value的值 -- v-model的值为当前被选中的el-option的 value 属性的值 -->
          <el-select v-model="agentId" placeholder="全部经纪" size="small" @change="changeFn">
            <el-option label="全部经纪" value="">全部经纪</el-option>
            <el-option v-for="item in form.agentsList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="nameContains" placeholder="请输入关键字" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增/编辑弹框 -->
    <AddCustomer ref="info" :dialog-visible.sync="isShow" @updateCustomer="updateCustomer" />
    <!-- 表格内容部分 -->
    <el-table :data="formInline" style="width: 100%" border>
      <el-table-column prop="image" label="图片" width="180">
        <template v-slot="{ row }">
          <img :src="row.image" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="agent.name" label="经纪" />
      <el-table-column prop="wechat" label="微信" />
      <el-table-column prop="desc" label="介绍" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button v-if="checkPerm('editClient')" type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
          <el-button v-if="checkPerm('delClient')" type="danger" size="small" @click="delCustomer(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格内容部分 -- 分页器 -->
    <MyPagination :page-size="page._limit" :total="total" @getStart="getStart" />
  </el-card>
</template>

<script>
import { getClientList, delClient, getOnceCli, getAgents, getClientTotal } from '@/api/user'
import AddCustomer from './component/add-customer'
export default {
  components: {
    AddCustomer
  },
  data() {
    return {
      formInline: [], // 客户列表数据
      isShow: false, // 弹框
      // agents: {},
      form: {
        agentsList: []
      },
      page: {
        _limit: 3,
        _start: 0
      },
      // 经纪Id
      agentId: '',
      // 客户名
      nameContains: '',
      // 客户总数
      total: 0
    }
  },
  // 计算属性 -- 动态，当其中的属性发生改变的时候，里面的数据，也会发生改变
  computed: {
    params() {
      const obj = {}
      obj._start = this.page._start
      obj._limit = this.page._limit
      // 筛选参数
      // 当 this.agentId 存在的时候，才会添加 agent 属性 相当于 if 语句
      this.agentId && (obj.agent = this.agentId)
      // 当 this.nameContains 存在的时候，才会添加 name_contains 属性
      this.nameContains && (obj.name_contains = this.nameContains)
      return obj
    }
  },
  // 获取客户列表
  created() {
    // 客户列表 -- 在打开页面的时候，就要存在客户列表数据
    this.getClientList()
    // 经纪列表 -- 下拉框(select)中要渲染的经纪列表
    this.getAgents()
  },
  methods: {
    // 封装 客户列表
    async getClientList() {
      // 解构数据
      const result = await getClientList({ ...this.params })
      // 获取data里面的数组
      this.formInline = result.data
      // 获取客户数量 -- 通过接口获取到客户数量
      const total = await getClientTotal({ ...this.params })
      this.total = total.data
    },
    // 经纪列表
    async getAgents() {
      const res = await getAgents()
      // 下拉列表需要用到 经纪列表
      this.form.agentsList = res.data
    },
    // 筛选
    async onSubmit() {
      // 调用 客户列表 方法 获取客户列表
      const info = this.getClientList()
      this.formInline = info.data
    },
    // 切换数据筛选
    async changeFn() {
      // 调用接口 传入 模糊搜索的参数 id
      // 保存id
      // this.agentId = id
      // 把start重置 -- 从开始获取的位置 -- 分页器（从哪个位置开始）
      this.page._start = 0
      // 调用客户列表方法
      const res = this.getClientList()
      // 这个时候页面刷新的是改变后的客户列表
      this.formInline = res.data
    },
    // 新增客户
    addCustomer() {
      this.isShow = true
    },
    // 删除客户
    async delCustomer(id) {
      // 二次询问
      this.$confirm('是否删除该客户', '删除', {
        type: 'warning'
      })
        .then(async() => {
          // 调用接口
          await delClient(id)
          // 刷新 -- 客户列表
          this.getClientList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑
    async editFn(id) {
      // 显示弹框
      this.isShow = true
      // 获取指定客户接口
      const res = await getOnceCli(id)
      // 回显
      this.$refs.info.formCustomer = res.data
      // 图片回显
      this.$nextTick(() => {
        this.$refs.info.fn(this.$refs.info.formCustomer.image)
      })
      // 刷新
      this.getClientList()
      console.log(1)
    },
    // 更新客户信息
    updateCustomer() {
      this.getClientList()
    },
    // 分页器
    // async currentChange(page) {
    //   // 开始的位置 分页的位置（在那一页）- 1 乘以 每页的数量
    //   this.page._start = (page - 1) * this.page._limit
    //   // 刷新
    //   this.getClientList()
    // }
    // 分页器
    getStart(start) {
      this.page._start = start
      this.getClientList()
    }
  }
}
</script>

<style scoped>
.el-card {
  margin: 20px;
}
.nav-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #eee;
}
.el-button {
  height: 30px;
}
.el-input {
  width: 500px;
}
.el-select {
  width: 100px;
}
.el-table {
  margin-top: 20px;
}
img {
  width: 100%;
}
</style>
